<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        ul{width: 450px;margin: 30px auto;}
        ul li{float: left;width: 150px;height: 150px;position: relative;}
        ul li img{position: absolute;top:50%;left: 50%;margin: -55px 0 0 -55px;}
        ul li:hover img{animation: move 0.5s;}

        @keyframes move{
            0%{transform: translate(0,0);opacity: 1;}
            60%{transform: translate(0,-150px);opacity: 0;}
            61%{transform: translate(0,55px);}
            100%{transform: translate(0,0);opacity: 1;}
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="./img/1.png" alt="">
        </li>
        <li>
            <img src="./img/2.png" alt="">
        </li>
        <li>
            <img src="./img/3.png" alt="">
        </li>
    </ul>
</body>
</html>